<template>
	<view class="technician-list">
		<!-- 导航栏 -->
		<nav-bar title="技师列表" backUrl="/pages/index/index" :isTabbar="true"></nav-bar>
		
		<!-- 搜索框 -->
		<view class="search-box">
			<view class="search-input">
				<image class="search-icon" src="/static/icons/search.png" mode="aspectFit"></image>
				<input 
					type="text" 
					placeholder="请输入员工名称" 
					v-model="searchText" 
					@input="handleSearch"
					@confirm="handleSearch"
				/>
			</view>
			
			<!-- 技能筛选按钮 -->
			<view class="filter-section">
				<view class="filter-btn" @tap="showSkillFilter">
					<text class="icon">🔍</text>
					<text>技能筛选</text>
					<text class="count" v-if="selectedSkills.length > 0">({{ selectedSkills.length }})</text>
				</view>
				
				<!-- 已选择的技能标签 -->
				<view class="selected-skills-preview" v-if="selectedSkillNames.length > 0">
					<view 
						class="skill-preview-tag" 
						v-for="(skillName, index) in selectedSkillNames.slice(0, 3)" 
						:key="'preview-' + index"
					>
						<text>{{ skillName }}</text>
					</view>
					<text class="more-text" v-if="selectedSkillNames.length > 3">等{{ selectedSkillNames.length }}项</text>
				</view>
			</view>
		</view>
		
		<!-- 技师列表 -->
		<view class="tech-list">
			<view class="tech-item" v-for="tech in techList" :key="tech.id" @tap="goToDetail(tech)">
				<!-- 左侧头像 -->
				<image class="avatar" :src="tech.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
				
				<!-- 中间信息 -->
				<view class="info">
					<view class="name-store">
						<text class="name">{{ tech.name }}（{{ tech.store.storeName }}）</text>
					</view>
					<view class="type" v-if="tech.technicianType">
						<text class="type-text">{{ tech.technicianType }}</text>
					</view>
					<view class="store-tag">
						<text class="tag">{{ tech.store.storeName }}</text>
					</view>
					<view class="service-count" v-if="tech.appointmentCount">
						<text class="count">服务人次 {{ tech.appointmentCount }}</text>
						<text class="star" v-if="tech.isStarTech">⭐</text>
					</view>
				</view>
				
				<!-- 右侧操作区 -->
				<view class="operation">
					<text class="edit-btn" @tap.stop="handleEdit(tech)">查看</text>
				</view>
			</view>
		</view>

		<!-- 无数据提示 -->
		<view class="no-data" v-if="techList.length === 0">
			<text>暂无技师数据</text>
		</view>
		
		<!-- 技能筛选弹出层 -->
		<view class="skill-popup-mask" v-if="showSkillPopup" @tap="closeSkillFilter">
			<view class="skill-popup" @tap.stop>
				<view class="popup-header">
					<text class="title">技能筛选</text>
					<text class="close" @tap="closeSkillFilter">×</text>
				</view>
				
				<!-- 已选择的技能显示 -->
				<view class="selected-skills" v-if="selectedSkillNames.length > 0">
					<text class="selected-title">已选择：</text>
					<view class="selected-tags">
						<view 
							class="skill-tag" 
							v-for="(skillName, index) in selectedSkillNames" 
							:key="'tag-' + index"
							@tap="removeSelectedSkill(skillName)"
						>
							<text>{{ skillName }}</text>
							<text class="remove">×</text>
						</view>
					</view>
				</view>
				
				<!-- 树形技能列表 -->
				<view class="skill-tree-list">
					<view class="tree-tips">
						<text>点击分类名称展开/收起，点击右侧选择按钮进行选择</text>
					</view>
					
					<!-- 调试信息 -->
					<view class="debug-info" v-if="skillList.length === 0">
						<text>暂无技能数据，请检查网络连接</text>
					</view>
					<view class="debug-info" v-else-if="firstLevelSkills.length === 0">
						<text>暂无一级技能分类</text>
					</view>
					
					<!-- 一级分类 -->
					<view 
						class="skill-tree-item level-1" 
						v-for="firstSkill in firstLevelSkills" 
						:key="'first-' + firstSkill.id"
					>
						<view class="skill-item-content">
							<view class="skill-left" @tap="toggleExpand('first', firstSkill.id)">
								<text class="expand-icon" :class="{ expanded: isExpanded('first', firstSkill.id) }">
									{{ getChildrenSkills(firstSkill.id, 2).length > 0 ? '▶' : '●' }}
								</text>
								<text class="skill-name">{{ firstSkill.categoryName }}</text>
							</view>
							<view class="skill-right">
								<button 
									class="select-btn" 
									:class="{ selected: selectedSkills.includes(firstSkill.id) }"
									@tap="toggleSkillSelection(firstSkill)"
								>
									{{ selectedSkills.includes(firstSkill.id) ? '已选' : '选择' }}
								</button>
							</view>
						</view>
						
						<!-- 二级分类 -->
						<view 
							class="skill-children level-2" 
							v-if="isExpanded('first', firstSkill.id) && getChildrenSkills(firstSkill.id, 2).length > 0"
						>
							<view 
								class="skill-tree-item" 
								v-for="secondSkill in getChildrenSkills(firstSkill.id, 2)" 
								:key="'second-' + secondSkill.id"
							>
								<view class="skill-item-content">
									<view class="skill-left" @tap="toggleExpand('second', secondSkill.id)">
										<text class="expand-icon" :class="{ expanded: isExpanded('second', secondSkill.id) }">
											{{ getChildrenSkills(secondSkill.id, 3).length > 0 ? '▶' : '●' }}
										</text>
										<text class="skill-name">{{ secondSkill.categoryName }}</text>
									</view>
									<view class="skill-right">
										<button 
											class="select-btn" 
											:class="{ selected: selectedSkills.includes(secondSkill.id) }"
											@tap="toggleSkillSelection(secondSkill)"
										>
											{{ selectedSkills.includes(secondSkill.id) ? '已选' : '选择' }}
										</button>
									</view>
								</view>
								
								<!-- 三级分类 -->
								<view 
									class="skill-children level-3" 
									v-if="isExpanded('second', secondSkill.id) && getChildrenSkills(secondSkill.id, 3).length > 0"
								>
									<view 
										class="skill-tree-item" 
										v-for="thirdSkill in getChildrenSkills(secondSkill.id, 3)" 
										:key="'third-' + thirdSkill.id"
									>
										<view class="skill-item-content">
											<view class="skill-left" @tap="toggleExpand('third', thirdSkill.id)">
												<text class="expand-icon" :class="{ expanded: isExpanded('third', thirdSkill.id) }">
													{{ getChildrenSkills(thirdSkill.id, 4).length > 0 ? '▶' : '●' }}
												</text>
												<text class="skill-name">{{ thirdSkill.categoryName }}</text>
											</view>
											<view class="skill-right">
												<button 
													class="select-btn" 
													:class="{ selected: selectedSkills.includes(thirdSkill.id) }"
													@tap="toggleSkillSelection(thirdSkill)"
												>
													{{ selectedSkills.includes(thirdSkill.id) ? '已选' : '选择' }}
												</button>
											</view>
										</view>
										
										<!-- 四级分类 -->
										<view 
											class="skill-children level-4" 
											v-if="isExpanded('third', thirdSkill.id) && getChildrenSkills(thirdSkill.id, 4).length > 0"
										>
											<view 
												class="skill-tree-item" 
												v-for="fourthSkill in getChildrenSkills(thirdSkill.id, 4)" 
												:key="'fourth-' + fourthSkill.id"
											>
												<view class="skill-item-content">
													<view class="skill-left">
														<text class="expand-icon">●</text>
														<text class="skill-name">{{ fourthSkill.categoryName }}</text>
													</view>
													<view class="skill-right">
														<button 
															class="select-btn" 
															:class="{ selected: selectedSkills.includes(fourthSkill.id) }"
															@tap="toggleSkillSelection(fourthSkill)"
														>
															{{ selectedSkills.includes(fourthSkill.id) ? '已选' : '选择' }}
														</button>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="popup-footer">
					<button class="reset-btn" @tap="resetSkills">重置</button>
					<button class="confirm-btn" @tap="confirmSkills">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import NavBar from '@/components/nav-bar/nav-bar.vue'

export default {
	components: {
		NavBar
	},
	data() {
		return {
			searchText: '',
			techList: [],
			loading: false,
			queryParams: {
				isDisplay: 1,
				workStatus: 1
			},
			storeList: [],
			storeMap: {},
			searchTimer: null,
			selectedSkills: [],
			selectedSkillNames: [],
			showSkillPopup: false,
			skillList: [],
			expandedCategories: {} // 记录展开状态的对象
		}
	},
	
	computed: {
		// 一级技能菜单列表
		firstLevelSkills() {
			return this.skillList.filter(item => item.level === 1 && item.status === 1)
				.sort((a, b) => a.sortOrder - b.sortOrder)
		}
	},
	
	onLoad() {
		this.loadSkillList()
		this.loadTechnicianList()
	},
	
	methods: {
	
		// 获取门店名称
		getStoreName(storeId) {
			return this.storeMap[storeId] || storeId
		},
		
		// 加载技师列表
		loadTechnicianList() {
			if (this.loading) return
			
			this.loading = true
			
			// 构建请求参数
			const requestData = {
				isDisplay: 1,
				workStatus: 1,
				name: this.searchText
			}
			
			// 如果有选择技能，添加技能筛选条件
			if (this.selectedSkills.length > 0) {
				// requestData.categoryIds = this.selectedSkills.join(',')
				requestData.categoriesIds = this.selectedSkills
			}
			
			uni.request({
				url: `${uni.$config.baseUrl}/technician/technician/listAll`,
				method: 'GET',
				data: requestData,
				success: (res) => {
					if (res.statusCode === 200) {
						const response = res.data
						if (response.code === 200) {
							let techList = response.rows || []
							
							// 如果有技能筛选，进行客户端筛选
							if (this.selectedSkills.length > 0) {
								techList = techList.filter(tech => {
									// 处理技师技能ID，确保是数组格式
									let techSkills = [];
									if (typeof tech.categoryIds === 'string') {
										// 如果是字符串，按逗号分割
										techSkills = tech.categoryIds.split(',').filter(id => id);
									} else if (Array.isArray(tech.categoryIds)) {
										// 如果已经是数组，直接使用
										techSkills = tech.categoryIds;
									}
									
									// 检查技师是否拥有任何选中的技能
									return this.selectedSkills.some(skillId => 
										techSkills.includes(skillId.toString())
									);
								})
							}
							
							this.techList = techList.map(tech => ({
								...tech
							}))
						} else {
							uni.showToast({
								title: response.msg || '获取技师列表失败',
								icon: 'none'
							})
						}
					} else {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						})
					}
				},
				fail: (err) => {
					console.error('获取技师列表出错：', err)
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					})
				},
				complete: () => {
					this.loading = false
				}
			})
		},

		// 搜索处理
		handleSearch(e) {
			// 不再需要设置 queryParams，直接调用加载方法
			if (this.searchTimer) {
				clearTimeout(this.searchTimer)
			}
			this.searchTimer = setTimeout(() => {
				this.loadTechnicianList()
			}, 300) // 300ms 后执行搜索
		},

		// 跳转到技师详情
		goToDetail(tech) {
			uni.navigateTo({
				url: `/pages/technician-detail/technician-detail?id=${tech.id}`
			})
		},

		// 编辑技师信息
		handleEdit(tech) {
			uni.navigateTo({
				url: `/pages/technician-detail/technician-detail?id=${tech.id}`
			})
		},

		// 显示技能筛选弹出层
		showSkillFilter() {
			this.showSkillPopup = true
		},

		// 关闭技能筛选弹出层
		closeSkillFilter() {
			this.showSkillPopup = false
		},

		// 选择技能
		toggleSkillSelection(skill) {
			const index = this.selectedSkills.indexOf(skill.id)
			const nameIndex = this.selectedSkillNames.indexOf(skill.categoryName)
			
			if (index !== -1) {
				// 取消选择
				this.selectedSkills.splice(index, 1)
				if (nameIndex !== -1) {
					this.selectedSkillNames.splice(nameIndex, 1)
				}
			} else {
				// 添加选择
				this.selectedSkills.push(skill.id)
				this.selectedSkillNames.push(skill.categoryName)
			}
		},

		// 重置技能
		resetSkills() {
			this.selectedSkills = []
			this.selectedSkillNames = []
		},

		// 确认技能
		confirmSkills() {
			// 更新已选择的技能名称
			this.selectedSkillNames = this.selectedSkills.map(id => {
				const skill = this.skillList.find(skill => skill.id === id)
				return skill ? skill.categoryName : ''
			}).filter(name => name)
			
			this.closeSkillFilter()
			// 重新加载技师列表
			this.loadTechnicianList()
		},

		// 移除已选择的技能
		removeSelectedSkill(skillName) {
			const skill = this.skillList.find(item => item.categoryName === skillName)
			if (skill) {
				const index = this.selectedSkills.indexOf(skill.id)
				if (index !== -1) {
					this.selectedSkills.splice(index, 1)
				}
				const nameIndex = this.selectedSkillNames.indexOf(skillName)
				if (nameIndex !== -1) {
					this.selectedSkillNames.splice(nameIndex, 1)
				}
			}
		},

		// 获取子技能
		getChildrenSkills(parentId, level) {
			return this.skillList.filter(skill => 
				skill.parentId === parentId && 
				skill.level === level && 
				skill.status === 1
			).sort((a, b) => a.sortOrder - b.sortOrder)
		},

		// 展开或收起技能
		toggleExpand(level, id) {
			const key = `${level}_${id}`
			this.$set(this.expandedCategories, key, !this.expandedCategories[key])
		},

		// 获取已展开的技能
		isExpanded(level, id) {
			const key = `${level}_${id}`
			return !!this.expandedCategories[key]
		},

		// 加载技能列表
		loadSkillList() {
			uni.request({
				url: `${uni.$config.baseUrl}/category/category/listAll`,
				method: 'GET',
				success: (res) => {
					if (res.statusCode === 200 && res.data.code === 200) {
						this.skillList = res.data.rows || []
						console.log('技能列表加载成功:', this.skillList)
					} else {
						uni.showToast({
							title: res.data.msg || '获取技能列表失败',
							icon: 'none'
						})
					}
				},
				fail: (err) => {
					console.error('获取技能列表失败:', err)
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					})
				}
			})
		},
	}
}
</script>

<style lang="scss">
.technician-list {
	min-height: 100vh;
	background: #F8F8F8;
	padding: 20rpx;
	
	.search-box {
		background: #FFFFFF;
		padding: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 8rpx;
		
		.search-input {
			display: flex;
			align-items: center;
			background: #F5F5F5;
			padding: 15rpx 20rpx;
			border-radius: 8rpx;
			
			.search-icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
			
			input {
				flex: 1;
				font-size: 28rpx;
				color: #333;
				
				&::placeholder {
					color: #999;
				}
			}
		}
	}
	
	.tech-list {
		.tech-item {
			display: flex;
			align-items: center;
			background: #FFFFFF;
			padding: 30rpx;
			margin-bottom: 20rpx;
			border-radius: 8rpx;
			
			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 60rpx;
				margin-right: 20rpx;
				background: #F5F5F5;
			}
			
			.info {
				flex: 1;
				
				.name-store {
					margin-bottom: 10rpx;
					
					.name {
						font-size: 32rpx;
						color: #333;
						font-weight: 500;
					}
				}
				
				.title {
					font-size: 28rpx;
					color: #666;
					margin-bottom: 10rpx;
				}
				
				.type {
					margin-bottom: 10rpx;
					
					.type-text {
						font-size: 26rpx;
						color: #666;
						background: #F0F0F0;
						padding: 4rpx 16rpx;
						border-radius: 4rpx;
					}
				}
				
				.store-tag {
					margin-bottom: 10rpx;
					
					.tag {
						display: inline-block;
						padding: 4rpx 16rpx;
						background: #F5F5F5;
						color: #666;
						font-size: 24rpx;
						border-radius: 4rpx;
					}
				}
				
				.service-count {
					display: flex;
					align-items: center;
					
					.count {
						font-size: 24rpx;
						color: #666;
					}
					
					.star {
						margin-left: 10rpx;
						color: #FFB800;
					}
				}
			}
			
			.operation {
				.edit-btn {
					display: inline-block;
					padding: 10rpx 30rpx;
					border: 1rpx solid #DDDDDD;
					border-radius: 30rpx;
					font-size: 26rpx;
					color: #666;
				}
			}
		}
	}

	.no-data {
		text-align: center;
		padding: 40rpx;
		color: #999;
		font-size: 28rpx;
	}

	.filter-section {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		flex-wrap: wrap;
		
		.filter-btn {
			display: flex;
			align-items: center;
			padding: 12rpx 24rpx;
			background: #2B87FF;
			border-radius: 30rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			transition: all 0.3s ease;
			box-shadow: 0 2rpx 8rpx rgba(43, 135, 255, 0.2);
			
			.icon {
				margin-right: 8rpx;
				font-size: 24rpx;
			}
			
			.count {
				margin-left: 8rpx;
				background: rgba(255, 255, 255, 0.2);
				padding: 2rpx 12rpx;
				border-radius: 20rpx;
				font-size: 24rpx;
			}
			
			&:active {
				background: #1976D2;
				transform: scale(0.98);
				box-shadow: 0 1rpx 4rpx rgba(43, 135, 255, 0.1);
			}
		}
		
		.selected-skills-preview {
			display: flex;
			align-items: center;
			margin-left: 20rpx;
			flex-wrap: wrap;
			margin-top: 8rpx;
			
			.skill-preview-tag {
				padding: 6rpx 16rpx;
				background: rgba(43, 135, 255, 0.1);
				color: #2B87FF;
				font-size: 24rpx;
				border-radius: 20rpx;
				margin-right: 12rpx;
				margin-bottom: 8rpx;
				border: 1rpx solid rgba(43, 135, 255, 0.2);
				font-weight: 500;
			}
			
			.more-text {
				color: #999;
				font-size: 24rpx;
				margin-left: 8rpx;
			}
		}
	}

	.skill-popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
		display: flex;
		align-items: flex-end;
		z-index: 999;
		backdrop-filter: blur(4px);
		
		.skill-popup {
			width: 100%;
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 0 0;
			padding: 36rpx;
			transform: translateY(0);
			animation: slideUp 0.3s ease;
			box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
			max-height: 80vh;
			display: flex;
			flex-direction: column;
			
			.popup-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;
				
				.title {
					font-size: 34rpx;
					color: #333;
					font-weight: 600;
				}
				
				.close {
					font-size: 44rpx;
					color: #999;
					padding: 10rpx;
					transition: all 0.3s ease;
					
					&:active {
						opacity: 0.7;
					}
				}
			}
			
			.selected-skills {
				padding: 20rpx 0;
				border-bottom: 1rpx solid #EEEEEE;
				margin-bottom: 20rpx;
				
				.selected-title {
					font-size: 28rpx;
					color: #333;
					font-weight: 600;
					margin-bottom: 16rpx;
				}
				
				.selected-tags {
					display: flex;
					flex-wrap: wrap;
					gap: 12rpx;
					
					.skill-tag {
						display: flex;
						align-items: center;
						padding: 8rpx 16rpx;
						background: linear-gradient(135deg, #2B87FF, #1976D2);
						color: #FFFFFF;
						border-radius: 20rpx;
						font-size: 26rpx;
						font-weight: 500;
						transition: all 0.3s ease;
						box-shadow: 0 2rpx 8rpx rgba(43, 135, 255, 0.2);
						
						&:active {
							transform: scale(0.95);
							box-shadow: 0 1rpx 4rpx rgba(43, 135, 255, 0.1);
						}
						
						text {
							&:first-child {
								margin-right: 8rpx;
							}
						}
						
						.remove {
							font-size: 20rpx;
							color: rgba(255, 255, 255, 0.8);
							background: rgba(255, 255, 255, 0.2);
							border-radius: 50%;
							width: 24rpx;
							height: 24rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-left: 8rpx;
							transition: all 0.3s ease;
							
							&:active {
								background: rgba(255, 255, 255, 0.3);
								transform: scale(0.9);
							}
						}
					}
				}
			}
			
			.skill-tree-list {
				flex: 1;
				overflow-y: auto;
				padding: 0 0 20rpx 0;
				
				.tree-tips {
					padding: 12rpx 0;
					margin-bottom: 16rpx;
					
					text {
						font-size: 24rpx;
						color: #999;
						line-height: 1.4;
					}
				}
				
				.debug-info {
					padding: 40rpx 0;
					text-align: center;
					
					text {
						font-size: 28rpx;
						color: #999;
					}
				}
				
				.skill-tree-item {
					&.level-1 {
						margin-bottom: 8rpx;
						
						.skill-item-content {
							background: #F8F8F8;
							border-radius: 12rpx;
							
							.skill-name {
								font-weight: 600;
								font-size: 32rpx;
							}
						}
					}
					
					.skill-item-content {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 16rpx 20rpx;
						background: #FFFFFF;
						border-radius: 8rpx;
						margin-bottom: 4rpx;
						transition: all 0.3s ease;
						
						&:active {
							background: #F9F9F9;
						}
						
						.skill-left {
							flex: 1;
							display: flex;
							align-items: center;
							
							.expand-icon {
								width: 32rpx;
								height: 32rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 20rpx;
								color: #666;
								margin-right: 12rpx;
								transition: all 0.3s ease;
								
								&.expanded {
									transform: rotate(90deg);
									color: #2B87FF;
								}
							}
							
							.skill-name {
								font-size: 30rpx;
								color: #333;
								flex: 1;
							}
						}
						
						.skill-right {
							.select-btn {
								padding: 8rpx 20rpx;
								border-radius: 20rpx;
								font-size: 26rpx;
								background: #F5F5F5;
								color: #666;
								border: none;
								transition: all 0.3s ease;
								
								&.selected {
									background: linear-gradient(135deg, #2B87FF, #1976D2);
									color: #FFFFFF;
									box-shadow: 0 2rpx 8rpx rgba(43, 135, 255, 0.2);
								}
								
								&:active {
									transform: scale(0.95);
								}
							}
						}
					}
					
					.skill-children {
						padding-left: 24rpx;
						margin-top: 8rpx;
						
						&.level-2 {
							.skill-item-content {
								background: #FAFAFA;
								
								.skill-name {
									font-size: 28rpx;
									color: #555;
								}
							}
						}
						
						&.level-3 {
							padding-left: 48rpx;
							
							.skill-item-content {
								background: #F5F5F5;
								
								.skill-name {
									font-size: 26rpx;
									color: #777;
								}
							}
						}

						&.level-4 {
							padding-left: 72rpx;
							
							.skill-item-content {
								background: #F0F0F0;
								
								.skill-name {
									font-size: 24rpx;
									color: #888;
								}
							}
						}
					}
				}
			}
			
			.popup-footer {
				display: flex;
				justify-content: space-between;
				margin-top: 36rpx;
				padding-top: 36rpx;
				border-top: 1rpx solid #EEEEEE;

				button {
					flex: 1;
					margin: 0 20rpx;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 30rpx;
					border-radius: 40rpx;
					transition: all 0.3s ease;
					border: none;

					&.reset-btn {
						background: #F5F5F5;
						color: #666;

						&:active {
							background: #EEEEEE;
						}
					}

					&.confirm-btn {
						background: linear-gradient(135deg, #2B87FF, #1976D2);
						color: #FFFFFF;
						box-shadow: 0 4rpx 12rpx rgba(43, 135, 255, 0.2);

						&:active {
							transform: scale(0.98);
							box-shadow: 0 2rpx 8rpx rgba(43, 135, 255, 0.2);
						}
					}
				}
			}
		}
	}
}

@keyframes slideUp {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0);
	}
}
</style>